<clr-vertical-nav [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapsed" (clrVerticalNavCollapsedChange)="updateNavCollapsed($event)">
  <!-- Navigation items -->
  <div [ngClass]= "{'navigation-items-collapsed' : collapsed, 'navigation-items' : !collapsed}">
    <ng-container *ngFor="let section of navigation.sections; let i = index; trackBy: identifyNavigationItem">
      <!-- Collapsed Navigation -->
      <ng-container *ngIf="collapsed; else expanded">
        <ng-template [ngIf]="section.module">
          <div class="nav-divider"></div>
        </ng-template>

        <ng-container *ngIf="section.children?.length > 0; else noChildCollapsed">
          <a clrVerticalNavLink
             (click)="openPopup(i)"
             [ngClass]= "{'item-selected' : i == this.lastSelection}"
             [routerLinkActiveOptions]="{exact: false}"
             [routerLink]="formatPath(section.path)"
             routerLinkActive="active"
             (mouseover)="flyoutIndex= i; lastSelection=i"
          >
            <clr-icon [attr.shape]="section.iconName | default:'home'" clrVerticalNavIcon></clr-icon>
          </a>

          <ng-container *ngIf="shouldExpand(i)">
            <div class="flyout nav-group-children"
                 (mouseleave)="flyoutIndex= -1; lastSelection= -1"
                 (document:mouseleave)="flyoutIndex= -1; lastSelection= -1"
            >
              <span class="flyout-header">{{ section.title }}</span>
              <clr-vertical-nav-group-children class="flyout-group">
                <ng-container *ngFor="let category of section.children; trackBy: identifyNavigationItem">
                  <a [routerLink]="formatPath(category.path)"
                    [routerLinkActiveOptions]="{exact: true}"
                    routerLinkActive="active"
                    class="flyout-item nav-link"
                    (click)="setNavState(false, i)"
                  >
                  {{ category.title }}
                  </a>
                </ng-container>
              </clr-vertical-nav-group-children>
            </div>
          </ng-container>
        </ng-container>

        <ng-template #noChildCollapsed>
              <span class="tooltip-override tooltip tooltip-md">
                <a clrVerticalNavLink
                   [ngClass]= "{'item-selected' : i == this.lastSelection}"
                   [routerLinkActiveOptions]="{exact: true}"
                   [routerLink]="formatPath(section.path)"
                   routerLinkActive="active"
                   (mouseover)="flyoutIndex= -1; lastSelection= i"
                   (mouseleave)="lastSelection= -1"
                   (click)="closePopups(i)"
                >
                    <clr-icon [attr.shape]="section.iconName | default:'home'" clrVerticalNavIcon></clr-icon>
                </a>
                <span class="tooltip-content-override tooltip-content">
                  <span>{{ section.title }}</span>
                </span>
              </span>
        </ng-template>

      </ng-container>
      <!-- Expanded Navigation -->
      <ng-template #expanded>
        <ng-template [ngIf]="section.module">
          <div class="nav-divider"></div>
          <span class="title">{{ section.module }}</span>
        </ng-template>
        <ng-container *ngIf="section.children?.length > 0; else noChildExpanded">
          <clr-vertical-nav-group
            routerLinkActive="active"
            [clrVerticalNavGroupExpanded]="shouldExpand(i)"
            (clrVerticalNavGroupExpandedChange)="setNavState($event, i)"
          >
            <clr-icon [attr.shape]="section.iconName | default:'home'" clrVerticalNavIcon></clr-icon>
          {{ section.title }}
            <clr-vertical-nav-group-children>
              <ng-container *ngFor="let category of section.children; trackBy: identifyNavigationItem">
                <a
                  clrVerticalNavLink
                  [routerLink]="formatPath(category.path)"
                  [routerLinkActiveOptions]="{exact: true}"
                  routerLinkActive="active"
                >
                  <clr-icon *ngIf="itemIcon(category) as categoryIcon" [attr.shape]="categoryIcon" clrVerticalNavIcon></clr-icon>
                {{ category.title }}
                </a>
              </ng-container>
            </clr-vertical-nav-group-children>
          </clr-vertical-nav-group>
        </ng-container>
        <ng-template #noChildExpanded>
          <a clrVerticalNavLink
             (click)="closePopups(i)"
             [routerLink]="formatPath(section.path)"
             [routerLinkActiveOptions]="{exact: true}"
             routerLinkActive="active"
          >
            <clr-icon [attr.shape]="section.iconName | default:'home'" clrVerticalNavIcon></clr-icon>
            <div class="nav-item-text">
            {{ section.title }}
            </div>
          </a>
        </ng-template>
      </ng-template>
    </ng-container>
  </div>

  <!-- Theme switcher -->
  <div class="theme-switcher">
    <app-theme-switch-button [collapsed]="collapsed"></app-theme-switch-button>
  </div>
</clr-vertical-nav>
